<template>
    <div>
        <nav-bar :head="head"></nav-bar>
        <div style="height: 46px;"></div>
        <van-form @submit="onSubmit">
            <div class="avatar_contain">
                <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="1"/>
            </div>

            <div class="text-info">
                <!-- 输入任意文本 -->
                <van-field v-model="user_name" name="user_name" label="用户昵称："/>
                <!-- 输入任意文本 -->
                <van-field
                    v-model="sign"
                    name="sign"
                    rows="2"
                    autosize
                    label="用户签名："
                    type="textarea"
                    placeholder="请输入留言"
                    show-word-limit
                />
            </div>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Uploader} from 'vant';
    import {Field} from 'vant';
    import { Form } from 'vant';
    import { Toast } from 'vant';

    Vue.use(Toast);
    Vue.use(Form);
    Vue.use(Field);
    Vue.use(Uploader);
    export default {
        name: "userinfo",
        data() {
            return {
                head: '编辑资料',
                avatar: JSON.parse(localStorage.getItem('userInfo')).avatar,
                user_name: JSON.parse(localStorage.getItem('userInfo')).user_name,
                sign: JSON.parse(localStorage.getItem('userInfo')).sign,
                fileList: [
                    {'url': document.location.protocol + '//' + location.host + JSON.parse(localStorage.getItem('userInfo')).avatar}
                ],
            }
        },
        created() {
            console.log(document.location.protocol + '//' + location.host + JSON.parse(localStorage.getItem('userInfo')).avatar)
        },
        methods: {
            afterRead(file) {
                var this_ = this;
                let data = new FormData();
                data.append('file', file.file);
                this_.$api.main.UploadAvatar(data).then(res => {
                    var response = res.data;
                    if (response.success){
                        this_.avatar = response.data.url;
                    }else {
                        Toast.fail(response.data.msg);
                    }
                })
            },
            onSubmit(data) {
                var this_ = this;
                data.avatar = this.avatar;
                data.user_id = JSON.parse(localStorage.getItem('userInfo')).id;
                this_.$api.main.EditUserInfo(data).then(res => {
                    if (res.data.success){
                        this_.$api.main.GetUserInfo().then(resp => {
                            localStorage.setItem('userInfo',JSON.stringify(resp.data.data))
                        });
                        Toast.success(res.data.msg);
                    }else {
                        Toast.fail(res.data.msg);
                    }
                    setTimeout(function () {
                        this_.$router.replace('/mine');
                    },1500)
                })
            },
        },
    }
</script>

<style scoped>
    body {
        height: 100vh;
        background: #f2f2f2;
    }

    .avatar_contain {
        text-align: center;
        padding: 15px;
        background: #fafafa;
    }

    .van-cell {
        background: #fafafa !important;
    }
</style>
